<template>
  <div>
    <body id="poster">
      <el-form
        class="login-container"
        label-position="left"
        label-width="0px"
        :rules="rules"
      >
        <h3 class="login_title">
          系统登陆
          <el-button @click="toRegister()">点我注册</el-button>
        </h3>
        <el-form-item label="" prop="loginName1">
          <el-input
            type="text"
            v-model="loginForm.loginName"
            auto-complete="off"
            placeholder="账号"
          ></el-input>
        </el-form-item>
        <el-form-item label="" prop="password1">
          <el-input
            type="password"
            v-model="loginForm.password"
            auto-complete="off"
            placeholder="密码"
          ></el-input>
        </el-form-item>
        <el-form-item style="width: 100%">
          <el-button
            type="primary"
            style="width: 100%; background: #505458; border: none"
            @click="login()"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </body>
  </div>
</template>
<script>
export default {
  name: "LoginS",
  data() {
    return {
      loginForm: {
        loginName: "",
        password: "",
      },
      rules: {
        loginName1: [
          { required: true, message: "请输入你的用户名", trigger: "blur" },
        ],
        password1: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    login() {
    //   console.log("submit!", this.lgoinForm);
      this.axios
        .post("http://localhost:8083/sys_user/login/",this.loginForm)
        .then((response) => {
          this.$message({
            type: "success",
            message: "成功登录,欢迎来到后台管理页面",
          });
          this.$router.push({ path: "/home" });
        }).catch((error)=>{
             this.$message.error('用户名或密码错误');
        });
    },
    toRegister() {
      this.$router.push({ path: "/Register" });
    },
  },
};
</script>
<style scope>
#poster {
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}
body {
  margin: 0px;
  padding: 0px;
  /* background-color:rgb(156, 185, 216); */
  background-image: url("../assets/back.jpg");
}
.login-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 90px auto;
  width: 350px;
  padding: 35px 35px 35px 35px;
  background: rgb(90, 209, 209, 0.1);
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
.login_title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>